<template>
	<view>
		<cu-custom style="height: 0px;" class="navBox" bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{MouldName}}</block>
		</cu-custom>
		<view>
			<view class="contentBox">
				<view class="contentHeader">
					<view class="headerLogo">
						<image :src="src" mode=""></image>
					</view>
					
					<view class="contentTitle">
						<view>{{MouldName}}</view>
						<view>备注：{{Remarks}}</view>
						<!-- <view>车间：{{entity.DepartmentIdName}}</view> -->
						<view>流程数：{{IsWorkCount}}</view>
					</view>
				</view>
			</view>
			
			<view class="userChange">
				<view class="isChoosedBox">
					<view class="choosedTitle">
						已选中人员
					</view>

					<view class="searchBox">
						<u-search @change="searchIsName" placeholder="请输入姓名" :clearabled='false'
							v-model="searchIsChoosedName" :show-action='false'></u-search>
					</view>

					<checkbox-group @change="changeChoice1" class="checkboxGroup">
						<label v-for="(item,index) in showIs" :key="item.value">
							<view>
								<checkbox :value="item.value" :checked="item.checked" />
							</view>
							<view class="userName">
								{{item.name}}
							</view>
							
						</label>
					</checkbox-group>
				</view>
				
				<view class="btnContain">
					
					<button class="minddleBtn" @click="toRight">
						移除→
					</button>
					<button class="minddleBtn" @click="toLeft">
						←添加
					</button>
					
				</view>
				
				<view class="isChoosedBox">
					<view class="choosedTitle">
						未选中人员
					</view>
					<view class="searchBox">
						<u-search @change="searchNotName" placeholder="请输入姓名" :clearabled='false'
							v-model="searchNotChoosedName" :show-action='false'></u-search>
					</view>
					<checkbox-group @change="changeChoice2" class="checkboxGroup">
						<label v-for="(item,index) in showNot" :key="item.value">
							<view>
								<checkbox :value="item.value" :checked="item.checked" />
							</view>
							<view class="userName">
								{{item.name}}
							</view>
							
						</label>
					</checkbox-group>
					
				</view>
			</view>
		</view>
		
		<view class="publish-goods-wrap">
			<view @click="chooseSave"  class="publish-goods-btn" >保存 </view>
		</view>
	</view>
</template>

<script>
	import request from '@/common/request.js'
	export default {
		data() {
			return {
				flowId: '',
				src:this.$request22.baseUrl1+'/Resource/sg/flow/flowdetail2.png',
				MouldName:'',
				IsWorkCount:'',
				Remarks:'',
				chooseUsers: [],  //已选人
				notChooseUsers: [],// 未选人
				usersId:[], // 上一页传入的已选人员Id
				// 勾选已选人
				choosedChecked:[],
				// 勾选未选人
				noChoosedChecked: [],
				
				searchIsChoosedName:'',
				searchNotChoosedName:'',
				showIs: [],  
				showNot: []
			}
		},
		onLoad(option) {
			let that = this
			that.flowId = option.flowId
			that.usersId = option.qrcodeUserIds.split(',')
			that.MouldName=option.MouldName
			that.IsWorkCount=option.IsWorkCount
			that.Remarks=option.Remarks
			that.getUsers(option.flowId)
			
		},
		methods: {
			getUsers(id){
				console.log('11231231')
				let that = this
				let opts= {
					url: 'WorkflowApi/GetWorkFlowConfigUserList',
					method: 'get' 
				}
				let data = {
					id,
					type: 1
				}
				request.httpTokenRequest(opts, data).then(res => {
					if(res.data.code == 1) {
						that.userList = res.data.data.data
						for(let i = 0; i<res.data.data.data.length; i++) {
							if(that.usersId.includes(res.data.data.data[i].importUnitId)){
								let ischoosed = {}
								ischoosed.value = res.data.data.data[i].importUnitId
								ischoosed.name = res.data.data.data[i].importUnitName
								res.data.data.data[i].flag = true
								that.chooseUsers.push(ischoosed)
								that.showIs = that.chooseUsers
							} else {
								let nochoosed = {}
								nochoosed.value = res.data.data.data[i].importUnitId
								nochoosed.name = res.data.data.data[i].importUnitName
								res.data.data.data[i].flag = false
								that.notChooseUsers.push(nochoosed)
								that.showNot = that.notChooseUsers 
							}
						}
					}
				})
			},
			searchIsName(e){
				let that = this
				let findList = that.chooseUsers.filter(item => item.name.includes(e))
				that.showIs = findList
				if (e == '' || e == null) {
					that.showIs = that.chooseUsers
				}
			},
			searchNotName(e){
				let that = this
				let findList = that.notChooseUsers.filter(item => item.name.includes(e))
				that.showNot = findList
				if (e == '' || e == null) {
					that.showNot = that.notChooseUsers
				}
			},
			
			// 将已选中人员中勾选人员移除
			toRight(){
				let that = this
				let choicelist = that.chooseUsers.filter(e => that.choosedChecked.includes(e.value))
				that.notChooseUsers = that.notChooseUsers.concat(choicelist)
				that.showNot = that.notChooseUsers 
				that.chooseUsers = that.chooseUsers.filter(e => !that.choosedChecked.includes(e.value))
				that.showIs = that.chooseUsers
				that.searchIsChoosedName = ''
			},
			// 将未选中人员中勾选人员添加至已选中人员
			toLeft(){
				let that = this
				let choicelist = that.notChooseUsers.filter(e => that.noChoosedChecked.includes(e.value))
				that.chooseUsers = that.chooseUsers.concat(choicelist)
				that.showIs = that.chooseUsers
				that.notChooseUsers = that.notChooseUsers.filter(e => !that.noChoosedChecked.includes(e.value))
				that.showNot = that.notChooseUsers
				that.searchNotChoosedName = ''
			},
			
			changeChoice1(e){
				let that = this
				that.choosedChecked = e.detail.value
			},
			changeChoice2(e){
				let that = this
				that.noChoosedChecked = e.detail.value
			},
			
			chooseSave(){
				let that = this
				let newChooseUsersList=[]
				for(let i=0;i<that.chooseUsers.length;i++){
					let newUserinfo={}
					newUserinfo.importUnitId = that.chooseUsers[i].value
					newUserinfo.importUnitName = that.chooseUsers[i].name
					newUserinfo.flag = true
					newChooseUsersList.push(newUserinfo)
				}
				let data = {}
				data.flowId = that.flowId
				data.newChooseUsersList = newChooseUsersList
				
				const eventChannel = this.getOpenerEventChannel();
				eventChannel.emit('acceptDataFromOpenedPage', {data: data})
				uni.navigateBack({
					delta: 1
				});
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.contentBox {
		background-color: rgba(249,249,249,1);
			
		.contentHeader {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 40rpx;
			padding-bottom: 20rpx;
			background-color: #fff;
				
			.headerLogo {
				width: 180rpx;
				height: 180rpx;
				
				image{
					width: 100%;
					height: 100%;
				}
				
			}
			.contentTitle {
				flex-grow: 1;
				align-self: stretch;
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				
				>view {
					> text {
						margin-right: 10rpx;
					}
				}
			}
		}
	}
	
	.userChange {
		display: flex;
		justify-content: space-between;
		margin: 20rpx 15rpx;
		background: #f5f7fa;
		border: 1px solid #e2eeff;
		border-radius: 20rpx;
		overflow: hidden;
		
		.isChoosedBox {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			border: 1px solid #ebeef5;
			border-radius: 4px;
			overflow: hidden;
			background: #fff;
			height: 60vh;

			.choosedTitle {
				height: 80rpx;
				line-height: 80rpx;
				align-self: stretch;
				text-align: center;
				border-bottom: 1px solid #ebeef5;
				
			}
			.searchBox {
				margin: 10rpx;
			}
			.checkboxGroup {
				align-self: stretch;
				padding-left: 25rpx;
				overflow-y: auto;
    			flex: 1;
				>label {
					display: flex;
					align-items: center;
					margin: 35rpx 0;
					.userName {
						margin-left: 20rpx;
					}
				}
			}
		}
		
		
		.btnContain{
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			align-items: center;
			flex: 0.7;
			.minddleBtn{
				background-color: #a0cfff;
				border-color: #a0cfff;
				color: #fff;
			}
		}
	}
	
	.publish-goods-wrap {
		background: rgba(255, 255, 255, .5);
		padding: 24rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		.publish-goods-btn {
			margin: 24rpx;
			background: #0079FE;
			color: #FFFFFF;
			height: 82rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 82rpx;
		}
	}
	
	
</style>